<html>
  <head>
    <title>喜迎吉林省妇女十四大，一起为盛会打CALL!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=750, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-title" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

  
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery-1.6.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"  type="text/javascript"></script>
    <script src="http://h5.jlrbyy.cn/wxjson/js/wxapi-wm.js?v=1.4"  type="text/javascript"></script> 
    <style>
        .up{
    width: 100px;height: 100px;position: absolute;z-index: 1;bottom: 10;
  
  }
  /* 定义淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
 
/* 定义淡出动画 */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
 
/* 应用动画 */
.up {
    animation: fadeIn 2s ease-in forwards, fadeOut 2s ease-out 2s infinite;
}
    </style>
  </head>
  <script>
    let u = navigator.userAgent
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
        //这个是安卓操作系统
    }
    if (isIOS) {
    　　window.location.href='ios.html'
    }
  </script>

 
  <script>
    // 初始化一个音频类，src资源可以是本地的有额可以是服务器上的

    var sound1 = new Howl({
      src: ['http://h5.jlrbyy.cn/h5call/lz.MP3'],
      autoplay: true,
      loop: true,
      preload: true,
    })
 
    // 音频资源 load 之后通过微信桥接触发播放
    sound1.on('load', () => {
      window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
        sound1.play()
      }, false)
    })
   
  </script>
  <body style="background-color:#f1f1f1;">

    <div>
      <img src="images/002.png" style="position: fixed;width: 64px;z-index: 999;right:10" id="music" />
    </div>
    <audio loop="loop" src="lz.MP3" id="media" preload="preload"></audio>
    <script>
      var flag=0
 
      $('#music').click(function(){
        var media = document.getElementById('media')
        if(flag==0)
        {
          flag=1
          $('#music').attr('src','images/001.png')
          media.pause()
          sound1.pause()
        }
        else{
          flag=0
          $('#music').attr('src','images/002.png')
          media.play()
          sound1.play()
        }

      })
    </script>



    <div id="main" role="main">
  
  
  
      
  
      <section id="first" class="story" data-speed="5" data-type="background" style="background-position: 0 0px;">    	
 
  
        <div class="qq" data-type="sprite" data-offsety="100" data-xposition="50%" data-speed="2" ></div>
        <div class="title" data-type="sprite" data-offsety="400" data-xposition="50%" data-speed="-2" ></div>
      

        <div class="wind" data-type="sprite" data-offsety="650" data-xposition="50%" data-speed="3" ></div>
  
          <article>
 
            <img src="images/one/5.png" style="width: 100%;position: absolute;z-index: 1;bottom: 0"/>
            <div style="width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
              <img src="images/up.png" class="up"/>
              <div style="position: absolute;z-index: 1;bottom: 10;color:#fff">向上滑动</div>
              </div>
          </article>
  
      
      </section>
      <section id="second"  data-offsety="300" class="story" data-speed="7" data-type="background" style="background-position: 50% 0px;" >



        <div class="title2" data-type="sprite" data-offsety="100" data-xposition="50%" data-speed="-9" ></div>
         
        <article>
    
          <img src="images/second/8.png" style="width: 100%;position: absolute;z-index: 1;bottom: -10px;right: 0"  />

     
        </article>



    </section>


    <section id="third" class="story" data-offsety="650" data-speed="5" data-type="background" style="background-position: 50% 0px;">
  
      <div class="title1" data-type="sprite" data-offsety="-100" data-xposition="50%" data-speed="-9" ></div>
      <article>
       
        <img src="images/third/10.png" style="width: 100%;position: absolute;z-index: 1;bottom: -10px;left: 0"  />


   
      </article>
    </section>



    <section id="fourth" class="story" data-offsety="950" data-speed="5" data-type="background" style="background-position: 50% 0px;">
  
      <div class="title1" data-type="sprite" data-offsety="-400" data-xposition="50%" data-speed="-9" ></div>
      <article>
        <img src="images/sex/18.png" style="width:100%;position: absolute;z-index: 1;bottom: 0px;left: 0"  />



   
      </article>


    </section>

    <section id="five" class="story" data-offsety="1000" data-speed="6" data-type="background" style="background-position: 50% 50px;">
      <div class="title1" data-type="sprite" data-offsety="-560" data-xposition="50%" data-speed="-9" ></div>
      <article>
        <img src="images/seven/19.png" style="width:100%;position: absolute;z-index: 1;bottom:0"  />

      </article>

  
    </section>

    <section id="sex" class="story" data-offsety="1600" data-speed="5" data-type="background" style="background-position: 50% 50px;">
  
      <div class="title1" data-type="sprite" data-offsety="-300" data-xposition="50%" data-speed="-20" ></div>
      <article>
        <img src="images/fourth/13.png" style="width:60%;position: absolute;z-index: 1;bottom:0"  />

      </article>
    </section>

    <section id="seven" class="story" data-offsety="1150" data-speed="8" data-type="background" style="background-position: 50% 50px;">
  
      <div class="title1" data-type="sprite" data-offsety="-200" data-xposition="50%" data-speed="-25" ></div>
      <article>
        <img src="images/five/16.png" style="width:100%;position: absolute;z-index: 1;bottom:0"  />

      </article>
 

    </section>

  

    <section id="eight" class="story" data-speed="8" data-type="background" data-offsety="1400" style="background-position: 50% 50px;">    	

      <div class="title1" data-type="sprite" data-offsety="-300" data-xposition="50%" data-speed="-25" ></div>
      <article style="display:  flex;justify-content: center;">
        <img src="images/eight/21.png" style="width:50%;z-index: 1;position: absolute; top:750px;z-index: 10" id="btn_call" />
        <img src="images/eight/22.png" style="width:100%;position: absolute;z-index: 1;bottom:0px"  />
      </article>
    </section>
 
    </div> 

  

  
    <script src="./js/script.js"></script>
  
    <script>
      $('#btn_call').click(function(){
        window.location.href='call.html'
      })
    </script>

  </body></html>